<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/home/special.css" />
		<style type="text/css">
			.mui-fullscreen .mui-segmented-control~.mui-slider-group {
				transition-duration: .2s !important;
				-webkit-transition-duration: .2s !important;
			}
			
			.mui-pull-bottom-tips {
				background: #eee;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="special" v-cloak>
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item0">
							全部
						</a>
						<a class="mui-control-item" href="#item1">
							精美店铺
						</a>
						<a class="mui-control-item" href="#item2">
							建店方案
						</a>
						<a class="mui-control-item" href="#item4">
							新闻资讯
						</a>
						<a class="mui-control-item" href="#item3">
							智慧零售
						</a>
						<a class="mui-control-item" href="#item5">
							其他
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div class="mui-slider-item mui-control-content" :class="{'mui-active': index == check}" v-for="(nav,index) in nav" :id="'item'+ index">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="apecial_list" @tap="openDetails(list)" v-for="list in nav.list" v-if="list.length!=0">
									<div class="apecial_img"><img src="../../images/loadImg/advert_one_max.png" v-lazy="imgCommonUrl + list.filePath" /></div>
									<div class="apecial_data">
										<div class="apecial_left">
											<div class="apecial_title">
												<div><img src="../../images/huo.png" /></div>{{list.title}}</div>
											<div class="apecial_msg">
												<div>{{list.tagName}}</div>
												<div class="see">{{list.proCount+0}}</div>
												<div class="collect">{{list.addCount+0}}</div>
											</div>
										</div>
										<div class="apecial_userhead">
											<img src="../../images/noimg.jpg" v-lazy="imgCommonUrl + list.portraitPic" />
										</div>
									</div>
								</div>
								<div></div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/mui.pullToRefresh.js"></script>
		<script src="../../js/libs/mui.pullToRefresh.material.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script>
			mui.init({
			});
			Vue.use(VueLazyload, {
				preLoad: 1.3,
				error: '../../images/loadImg/advert_one_max.png',
				loading: '../../images/loadImg/advert_one_max.png'
			});
			var special = new Vue({
				el: '#special',
				data: {
					imgCommonUrl: common.imageUrl,
					nav: [{
							url: '/thematic/getList',
							page: 1,
							name: '全部',
							list: [],
							swith: true
						},
						{
							url: '/thematic/getList/tag/',
							page: 1,
							name: '精美店铺',
							list: [],
							swith: false
						},
						{
							url: '/thematic/getList/tag/',
							page: 1,
							name: '建店方案',
							list: [],
							swith: false
						},
						{
							url: '/thematic/getList/tag/',
							page: 1,
							name: '新闻资讯',
							list: [],
							swith: false
						},
						{
							url: '/thematic/getList/tag/',
							page: 1,
							name: '智慧零售',
							list: [],
							swith: false
						},

						{
							url: '/thematic/getList/tag/',
							page: 1,
							name: '其他',
							list: [],
							swith: false
						}
					],
					check: 0
				},
				methods: {
					openDetails: function(data) {
						common.open('../special/specialdetails.html', '../special/specialdetails.html', data.themaId)
					}
				}

			})

			document.getElementById('slider').addEventListener('slide', function(e) {
				special.check = e.detail.slideNumber
				if(!special.nav[special.check].swith) {
					upreshlf()
					special.nav[special.check].swith = true
				}
			})

			//阻尼系数
			var deceleration = mui.os.ios ? 0.003 : 0.0009;
			mui('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration: deceleration
			});
			upreshlf()

			function upreshlf(en) {
				mui(document.querySelectorAll('.mui-slider-group .mui-scroll')[special.check]).pullToRefresh({
					down: {
						callback: function() {
							special.nav[special.check].page = 1
							var self = this;
							addList(true, self)
						}
					},
					up: {
						callback: function() {
							var self = this;
							addList(false, self)
						},
						auto: true
					}
				});
			}

			function addList(swith, self) {
				var tagId = special.check == 0 ? '' : special.check
				common.ajax(special.nav[special.check].url + tagId, {
					curPageNO: special.nav[special.check].page++
				}, function(data) {
					if(data.code == 1) {
						if(swith) {
							special.nav[special.check].list = []
							setTimeout(function() {
								self.endPullDownToRefresh();
							}, 300)
							if(data.data.pageCount <= special.nav[special.check].page) {
								self.endPullUpToRefresh(true);
							} else {
								self.refresh(true)
							}
						} else {
							if(data.data.pageCount <= special.nav[special.check].page) {
								self.endPullUpToRefresh(true);
							} else {
								self.endPullUpToRefresh();
							}
						}
						special.nav[special.check].list = special.nav[special.check].list.concat(data.data.list)
					} else {
						if(data.resultMsg) {
							mui.toast(data.resultMsg)
						}
						if(swith) {
							self.endPullDownToRefresh();
						} else {
							self.endPullUpToRefresh();
						}
					}
				}, true, 'get')
			}
			var _toast = false
			mui.back = function() {
				if(!_toast || !_toast.isVisible()) {
					_toast = mui.toast('再按一次返回键退出', {
						type: 'div'
					});
				} else {
					var main = plus.android.runtimeMainActivity();
    main.moveTaskToBack(false);
				}
			}
		</script>
	</body>

</html>